<template>
  <div class="all">
    <el-table :data="tableData"
              stripe
              style="width: 100%"
    >
      <el-table-column prop="name"
                       label="店名"
                       width="180">
      </el-table-column>
      <el-table-column prop="time"
                       label="下单时间"
                       width="180">
      </el-table-column>
      <el-table-column prop="state"
                       label="当前状态"
                       width="180">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button @click="order(scope.row.state)" style=" width:50%; margin-bottom:0px;">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    //在进入之前先从后台获取信息
    return {
      tableData: [{
        name: '17312973192',
        time: '17:31',
        state: '已支付'
      }, {
        name: '41261432215',
        time: '12:29',
        state: '未支付'
      }, {
        name: '13947283429',
        time: '11:02',
        state: '已完成'
      }, {
        name: '17023462782',
        time: '7:40',
        state: '已取消'
      }]
    }
  },
  methods: {
    order(state) {
      if (state == "已支付") {
        this.$router.replace('/my_info/myorder/paid/detail_paid');
      } else if (state == "未支付") {
        this.$router.replace('/my_info/myorder/unpay/detail_unpay');
      } else if (state == "已完成") {
        this.$router.replace('/my_info/myorder/finished/detail_finished');
      } else if (state == "已取消") {
        this.$router.replace('/my_info/myorder/cancelled/detail_cancelled');
      }
      //send the message to back-end
      console.log("all");
    }
  }
}
</script>
